<template>
  <div>
  <el-table
    :data="tableData"
    border
    stripe
    style="width: 100%">
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="title"
      label="书名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="author"
      label="作者"
      width="180">
    </el-table-column>
    <el-table-column
      prop="copies"
      label="抄本"
      width="180">
    </el-table-column>

    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="mini" @click="add">添加</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>

    <el-button @click="addVisible = false">取 消</el-button>

  </el-table>



  <el-dialog style="width: 1000px;height: 1000px;" title="书本信息" :visible.sync="zdydialog">
      <el-form :model="form">

        <el-form-item label="编号" width="80px">
          <el-input class="dialog_input" v-model="form.id" ></el-input>
        </el-form-item>

        <el-form-item label="书名" width="80px">
          <el-input class="dialog_input" v-model="form.title" ></el-input>
        </el-form-item>

        <el-form-item label="作者" width="80px">
          <el-input class="dialog_input" v-model="form.author" ></el-input>
        </el-form-item>

        <el-form-item label="抄本" width="80px">
          <el-input class="dialog_input" v-model="form.copyes" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>

    </el-dialog>

  </div>
</template>



<script>

export default {
    data() {
      return {
        tableData: [
  {"id": 1, "title": "Python编程", "author": "John Doe", "copies": 4},
  {"id": 2, "title": "历史的秘密", "author": "Jane Smith", "copies": 3},
  {"id": 3, "title": "宇宙探索", "author": "Emily Brown", "copies": 2},
  {"id": 4, "title": "健康生活", "author": "Mike Johnson", "copies": 5},
  {"id": 5, "title": "数学之美", "author": "Sarah Lee", "copies": 4},
  {"id": 6, "title": "艺术欣赏", "author": "David White", "copies": 3},
  {"id": 7, "title": "编程入门", "author": "Alice Green", "copies": 2},
  {"id": 8, "title": "科幻世界", "author": "Frank Black", "copies": 5},
  {"id": 9, "title": "自然奇观", "author": "Grace Blue", "copies": 4},
  {"id": 10, "title": "音乐之声", "author": "Tom Red", "copies": 3}],
      zdydialog: false,
      formLabelWidth: '80px',
      form: {},
      submitType : "",       
         
      }
    },
    methods: {
      submit() {
      this.zdydialog = false

      if(this.submitType == "add"){
        this.form.date = reformat(this.form.date);
        this.tableData.push(this.form)
      }else {

      }
    },
      add() {
        this.form = {
        id: '',
        title: '',
        author: '',
        copies: ''
      }
      this.submitType = "add";
      this.zdydialog = true
      },
    handleEdit(index, row) {
      // this.form = this.tableData[index]
      this.submitType = "update";
      this.form = row
      this.zdydialog = true
    },
      handleDelete(index, row) {
        console.log(index, row);
        this.$confirm(`确认是否删除姓名为${row.name}的记录？`, '删除', {
                    confirmButtonText: '确定',
                }).then(() => {
                    let res = this.tableData.splice(index, 1)
                    let msg = `删除成功`
                    if (!res) {
                        msg = `删除失败`
                    }
                    this.$message({
                        type: 'info',
                        message: msg
                    });
                })
              }
            },
            cancel() {
      this.zdydialog = false
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }

  
</script>
